<template>
  <div>
    <el-form ref="form" :model="form" inline>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="form.mobile" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      >
      <slot name="first-column"></slot>
      <el-table-column
        :label="item.label"
        :width="item.width || ''"
        :fixed="item.fixed"
        :show-overflow-tooltip="item.showTips"
        v-for="item in columns"
        :key="item.key"
        :align="item.align || 'center'"
      >
        <template slot-scope="scope">
          <el-button
            v-if="item.key === 'contractName'"
            type="text"
            class="text-ellipsis"
            @click="handleContractPreview(scope.row.contractId)"
            >{{ scope.row.contractName }}</el-button
          >
          <el-button
            v-else-if="item.key === 'name'"
            type="text"
            @click="handleShowDetail(scope.row.id)"
            class="text-ellipsis"
            >{{ scope.row[item.key] }}</el-button
          >
          <span v-else-if="item.key === 'gender'">{{ scope.row[item.key] | genderFilter }}</span>
          <span v-else-if="item.key === 'education'">{{ scope.row[item.key] | educationFilter }}</span>
          <span v-else-if="item.key === 'sendTime'">
            {{ scope.row.sendStartTime | timeFilter(item.format) }} ~
            {{ scope.row.sendEndTime | timeFilter(item.format) }}
          </span>
          <span v-else-if="item.datatype === 'time'">
            {{ scope.row[item.key] | timeFilter(item.format) }}
          </span>
          <span v-else>{{ scope.row[item.key] || '--' }}</span>
        </template>
      </el-table-column>
      <slot name="operator"></slot>
    </el-table>
    <el-pagination
      small
      layout="total, prev, pager, next"
      :total="totalCount"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      style="margin-top:15px"
    />
    <detail-pop :visible="detailPop" :Id="detailPopId" @detailHide="handleDetailHide"></detail-pop>
  </div>
</template>

<script>
import { getList } from '@common/api/worker';
import { GENDER, EDUCATION } from '@common/consts/worker';
import { formatTime } from '@common/utils/time';
import { getColumns } from '@common/utils/worker';
import DetailPop from './detail.vue';

export default {
  components: { DetailPop },
  props: {
    // list: {
    //   type: Array,
    //   default() {
    //     return [];
    //   },
    // },
    // listLoading: {
    //   type: Boolean,
    //   default() {
    //     return true;
    //   },
    // },
    status: {
      type: String,
      default() {
        return '';
      },
    },
    isSafedeal: { // 安全承诺书
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  filters: {
    genderFilter(gender) {
      // 性别
      return gender ? GENDER.find(v => v.value === gender)?.label || '--' : '--';
    },
    educationFilter(edu) {
      // 学历
      return edu ? EDUCATION.find(v => v.value === edu)?.label || '--' : '--';
    },
    timeFilter(time, format) {
      if (time) return formatTime(time, { format: format || 'YYYY-MM-DD' });
      return '--';
    },
  },

  data() {
    return {
      detailPop: false,
      listLoading: true,
      detailPopId: '',
      list: [],
      showPager: false,
      currentPage: 1,
      limit: 10,
      offset: 0,
      totalCount: 0,
      form: {
        name: '',
        mobile: '',
      },
    };
  },
  computed: {
    columns() {
      // WAIT_SIGN
      const basicFields = ['name', 'mobile', 'gender', 'age', 'idcardNo', 'education', 'birthPlace'];
      let keys = basicFields;
      switch (this.status) {
        case 'WAIT_SIGN':
          keys = basicFields.concat(['address', 'createdOn', 'contractName', 'deadline']);
          break;
        case 'WAIT_SEND':
          keys = basicFields.concat(['address', 'createdOn', 'contractName']);
          break;

        case 'LEAVE_OFF':
          keys = basicFields.concat(['address', 'deletedOn']);
          break;
        case 'SEND':
          keys = basicFields.concat(['tenantName', 'sendTime']);
          break;
        default:
          keys = basicFields.concat(['address', 'createdOn']);
      }
      return getColumns(keys);
    },
  },
  created() {
    this.fetchData();
  },

  methods: {
    // 详细信息弹窗
    handleShowDetail(workerId) {
      this.detailPop = true;
      this.detailPopId = workerId;
      // this.$router.push({
      //   path: `/worker/detail/${workerId}`,
      // });
    },
    // 查看合同
    handleContractPreview(flowId) {
      if (flowId) {
        this.$router.push({
          path: `/contract/detail/${flowId}`,
        });
      } else {
        this.$$message({
          message: '暂不支持查看',
          type: 'warning',
        });
      }
    },
    handleDetailHide() {
      this.detailPop = false;
      this.detailPopId = '';
    },

    handleSelectionChange(val) {
      this.$emit('selection-change', val);
    },
    async fetchData() {
      this.listLoading = true;
      try {
        const params = {
          limit: this.limit,
          offset: this.offset,
          name: this.form.name || '',
          mobile: this.form.mobile || '',
        };
        if (this.isSafedeal) {
          params.proposalStatus = this.status || null;
        } else {
          params.status = this.status;
        }
        const { data } = await getList(params);
        this.list = data.workers;
        this.listLoading = false;
        this.totalCount = data.totalCount;
        this.showPager = data.totalCount >= this.limit; // 无需分页
      } catch (error) {
        this.listLoading = false;
      }
    },
    handleCurrentChange(data) {
      this.listLoading = true;
      this.offset = (data - 1) * this.limit;
      this.currentPage = data;
      this.fetchData();
    },

    // 搜索
    onSearch() {
      this.offset = 0;
      this.fetchData();
    },
    // 重置
    onReset() {
      this.$refs.form.resetFields();
      this.offset = 0;
      this.fetchData();
    },
  },
};
</script>
